<template>
	<view class="page">
		<view class="user-info-wrap">
			<view class="info-cont">
				<view class="user-info-item">
					<view class="info-item-left">头像</view>
					<view class="info-item-right"><image class="avatar" :src="userInfo.headimg" mode="" @click="chooseImage"></image></view>
				</view>
				<view class="user-info-item">
					<view class="info-item-left">昵称</view>
					<view class="info-item-right">
						<input type="text" v-model="userInfo.nickname" placeholder="请输入昵称" maxlength="12">
					</view>
				</view>
				<view class="user-info-item">
					<view class="info-item-left">性别</view>
					<view class="info-item-right">
						<picker @change="bindPickerChange" :value="userInfo.gender" :range="sexArr" class="info-item-right">
							<view class="sex-view">{{sexArr[userInfo.gender]}}</view>
						</picker>
					</view>
					<view style="font-family:tpf-iconfont;">{{'\ue605'}}</view>
				</view>
			</view>
			<button class="user-info-submit-btn" @tap="editUserInfo">提交修改</button>
		</view>
	</view>
</template>

<script>
	import config from '@/common/js/config'
	import cache from '@/common/js/cache'
	import data from '@/data/ucenter/user-info-edit/user-info-edit.js';
	import {REMOTE_API_URL} from '@/common/js/config.js'
	export default {
		data() {
			return {
				userInfo: {},
				sexArr: ['保密','男', '女']
			}
		},
		async created() {
			const userInfoData = data.userInfo();
			this.userInfo = await userInfoData;
		},
		methods: {
			bindPickerChange(e) {
				console.log(this.userInfo);
				this.userInfo.gender = e.target.value
			},
			chooseImage() {
				let that = this;
				uni.chooseImage({
					count:9,
					sizeType:['original','compressed'],
					sourceType:['album','camera'],
					success(res) {
						//开始上传图片
						uni.uploadFile({
							url:REMOTE_API_URL+"/Index/upload",
							filePath:res.tempFilePaths[0],
							// #ifdef MP-ALIPAY
							fileType:"image",
							// #endif
							name:"file",
							header: { "Timestamp": parseInt(new Date().getTime() / 1000)+"" /*, "Access-Token": config.DEVELOPMENT?config.TOKEN:cache.get("token")*/},
							formData:{api_version:"1.0.0"},
							success:(uploadFileRes)=>{
								console.log(JSON.parse(uploadFileRes.data));
								let res = JSON.parse(uploadFileRes.data);
								if(res.code==0){
									that.userInfo.headimg = res.data[0];
								}else{
									that.$Helper.tpfJump({title:res.msg});
								}
							}
						});
					},
					complete() {}
				})
			},
			editUserInfo(){
				console.log("开发中....");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: $uni-bg-color-grey;
	}
	.user-info-wrap{
		padding: 20rpx;
	}
	.info-cont{
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 10px;
	}
	.user-info-cont{
		padding: 20rpx;
	}
	.info-cont .user-info-item:last-child{
		border-bottom: none;
	}
	.user-info-item{
		display: flex;
		align-items:center;
		justify-content:space-between;
		border-bottom:1px solid #cecece;
		padding: 20rpx 0;
	}
	.user-info-item-bottom{
		border-bottom: none;
	}
	.avatar-left{
		height: 200rpx;
	}
	.info-item-left{
		width:20%;
	}
	.info-item-right{
		flex: 1;
	}
	.avatar{
		width: 150rpx;
		height: 150rpx;
		border-radius: $uni-border-radius-circle;
	}
	.user-info-submit-btn{
		margin:20rpx 0 0;
		padding:6rpx 0;
		background-color: #00aa00;
		text-align: center;
		border-radius: 10rpx;
		color: #ffffff;
	}
	.sex-view{
		width: 150rpx;
	}
</style>
